<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名"/>
      <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户Id"/>
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入手机号"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" width="100px" label="用户ID" prop="id" sortable/>

      <el-table-column align="center" label="用户昵称" prop="nickname"/>

      <el-table-column align="center" label="用户头像" width="80">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="手机号码" prop="mobile"/>

      <el-table-column align="center" label="性别" prop="gender">
        <template slot-scope="scope">
          <el-tag >{{ genderDic[scope.row.gender] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="认证状态" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isReal?'success':'warning'">{{ scope.row.isReal?'已认证':'未认证' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{ statusDic[scope.row.status] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
           <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 用户编辑对话框 -->
    <el-dialog :visible.sync="userDialogVisible" title="用户编辑">
      <el-form ref="userDetail" :model="userDetail" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userDetail.username" :disabled="true" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="userDetail.nickname" />
        </el-form-item>
        <el-form-item label="用户密码" prop="mobile">
          <el-input v-model="userDetail.password" />
        </el-form-item>
        <el-form-item label="用户手机" prop="mobile" v-if="card">
          <el-input v-model="card.phone" />
        </el-form-item>
        <el-form-item label="用户性别" prop="gender">
          <el-select v-model="userDetail.gender" placeholder="请选择"><el-option v-for="(item, index) in genderDic" :key="index" :label="item" :value="index" /></el-select>
        </el-form-item>
        <el-form-item label="用户等级" prop="userLevel">
          <el-select v-model="userDetail.userLevel" placeholder="请选择"><el-option v-for="(item, index) in levelDic" :key="index" :label="item" :value="index" /></el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="userDetail.status" placeholder="请选择"><el-option v-for="(item, index) in statusDic" :key="index" :label="item" :value="index" /></el-select>
        </el-form-item>
        <el-form-item label="认证状态">
          <el-switch
            v-model="userDetail.isReal"
            active-text="已认证"
            disabled="disabled"
            inactive-text="未认证">
          </el-switch>
        </el-form-item>
        <el-form-item label="有效证件" v-if="userDetail.isReal">
          <div class="fl">
            <h4>正面</h4>
            <div>
              <div class="demo-image__preview">
                <el-image
                  style="width: 140px; height: 100px"
                  :preview-src-list="[card.positiveIdcard]"
                  :src="card.positiveIdcard">
                </el-image>
              </div>
            </div>
            <el-button size="mini" type="success" @click="clickDownLoad(card.positiveIdcard)">保存</el-button>
          </div>
          <div class="fl">
            <h4>反面</h4>
            <div>
              <div class="demo-image__preview">
                <el-image
                  style="width: 140px; height: 100px"
                  :preview-src-list="[card.backIdcard]"
                  :src="card.backIdcard" >
                </el-image>
              </div>
            </div>
            <el-button size="mini" type="success" @click="clickDownLoad(card.backIdcard)">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUserUpdate">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList ,userDetail ,updateUser, delUser } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'User',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        username: undefined,
        mobile: undefined,
        userId: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      downloadLoading: false,
      genderDic: ['未知', '男', '女'],
      levelDic: ['普通用户', 'VIP用户', '高级VIP用户'],
      statusDic: ['可用', '禁用', '注销'],
      userDialogVisible: false,
      userDetail:{
      },
      card: {
        positiveIdcard: '',
        backIdcard: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      if(this.listQuery.userId){
        userDetail(this.listQuery.userId).then(response => {
          this.list = [];
          if(response.data.data){
            this.list.push(response.data.data)
            this.total = 1
            this.listLoading = false
          }else{
            this.list = []
            this.total = 0
            this.listLoading = false
          }
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      }else{
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      }
    },
    handleDel(row) {
      this.$confirm('是否该用户删除？')
        .then(_ => {
          delUser(row).then(res=>{
             this.$notify.success({
               title: '成功',
               message: '删除成功'
             })
             this.handleFilter()
          })
        })
        .catch(_ => {})
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['用户名', '手机号码', '性别', '生日', '状态']
        const filterVal = ['username', 'mobile', 'gender', 'birthday', 'status']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '用户信息')
        this.downloadLoading = false
      })
    },
    handleDetail(row) {
      // this.userDetail = row
      userDetail(row.id).then(res => {
        this.userDetail = row;
        this.card = res.data.data.userCard;
        this.userDialogVisible = true
        console.log(res)
      })

    },
    handleUserUpdate(){
     updateUser(this.userDetail)
        .then((response) => {
          this.userDialogVisible = false
          this.$notify.success({
            title: '成功',
            message: '更新用户成功'
          })
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    /**
    * 获取图片的 base64 编码 DataURL
    */
    getImageDataURL(image) {
        // 创建画布
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext('2d');
        // 以图片为背景剪裁画布
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // 获取图片后缀名
        const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
        // 某些图片 url 可能没有后缀名，默认是 png
        return canvas.toDataURL('image/' + extension, 1);
    },
    downLoad(downloadName, url) {
        const tag = document.createElement('a');
        // 此属性的值就是下载时图片的名称，注意，名称中不能有半角点，否则下载时后缀名会错误
        tag.setAttribute('download', downloadName);

        const image = new Image();
        // 设置 image 的 url, 添加时间戳，防止浏览器缓存图片
        image.src = url + '?time=' + new Date().getTime();
        //重要，设置 crossOrigin 属性，否则图片跨域会报错
        image.setAttribute('crossOrigin', 'Anonymous');
        // 图片未加载完成时操作会报错
        image.onload = () => {
            tag.href = this.getImageDataURL(image);
            tag.click();
        };
    },
    // 截取图片名称
    getFileName(name){ // 获取到文件名
        let pos = name.lastIndexOf('\/'); // 查找最后一个/的位置
        return name.substring(pos + 1); // 截取最后一个/位置到字符长度，也就是截取文件名
    },
    clickDownLoad(img) {
    	this.downLoad(this.getFileName(img), img)
    },
  }
}
</script>
<style lang="scss">
  .fl{
    float: left;
    margin-right: 10px;
    h4{
      margin-bottom: 0;
      margin-top: 0;
    }
  }
</style>
